<template>
    <!-- 聊天 -->
    <div class="class-mg">

        <!-- 对话框 -->
        <div class="content">
            <chat  :idData="IdData"></chat>
        </div>

    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import useUserStore from '@/stores/useUserStore';
import Chat from '@/components/Chat.vue';
import studentHttp from '@/api/studentHttp';
const userStore = useUserStore()
const IdData = ref({
    userId:userStore.userInfo.userId,
    toUserId:null
})

onMounted(()=>{
    getTouserId()
})


function getTouserId(){
//获取学生的老师Id
studentHttp.getStudentClass(IdData.value.userId).then((res)=>{
    if (res.code ==200) {
        //改变id 触发子组件的获取 对方用户数据以及聊天记录的 方法调用
        IdData.value.toUserId = res.data.teacherId
    }
})
}





</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
    background-color: rgb(182, 174, 174, 0.1);
    display: flex;
    justify-content: center;
    height: 900px;
    border-radius: 10px;
}

.content {
    margin: 10px;
    width: 85%;
    min-width: 600px;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 10px;
}

</style>